<script setup lang='ts'>
  import { ToUserAndRoom, getOSSFile } from '@/utils/public';
  const props = defineProps({
    image:{
      type:String,
      default:''
    },
    user_id:{
      type:[Number,String],
      default:0
    },
    room_id:{
      type:[Number,String],
      default:0
    },
    room_open:{
      type:Number,
      default:0
    },
    /**
     * tabberType 1 魅力榜 2 人气榜  3 富豪榜 4 房间榜
     * 
     */
     tabberType:{
      type:Number,
      default:1
    }
  })
</script>

<template>
  <div @click="ToUserAndRoom({
    user_id,
    room_id,
    room_open
  })" class="portrait" :style="{'---borderRadiusNum':tabberType==4?'8px':'100%'}">
    <div class="imgBorder">
      <div class="relative">
        <img v-if="image" :src="getOSSFile(image)" class="portraitImg">
        <img v-if="tabberType != 4 && !image" src="@/assets/images/icon6.png" class="noIcon">
      </div>
    </div>
    <div v-if="room_open == 1" class="tips"></div>
  </div>
</template>

<style lang='scss' scoped>
  .portrait {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: var(---borderRadiusNum);
    .imgBorder {
      overflow: hidden;
      width: 100%;
      height: 100%;
      padding: 1px;
      box-sizing: border-box;
      // background: #FFEED5;
      background: rgba(255,238,213,0.2);
      border-radius: inherit;
      .relative {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: inherit;
      }
    }
    .noIcon {
      width: 100%;
      height: 100%;
    }
    .portraitImg {
      position: absolute;
      width: auto;
      min-width: 100%;
      height: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    .tips {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0px;
      width: 42px;
      height: 16px;
      background: url('@/assets/images/icon2.png') left top / 100% 100% no-repeat;
    }
  }
</style>